<template>
  <div class="shooting-star-wrap">
    <div class="shooting-star shooting-star1"></div>
    <div class="shooting-star shooting-star2"></div>
    <div class="shooting-star shooting-star3"></div>
    <div class="shooting-star shooting-star4"></div>
  </div>
</template>

<script lang="ts">
export default {}
</script>

<style lang="scss" scoped>
.shooting-star-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  .shooting-star {
    position: absolute;
    animation: tail 2s ease-in-out infinite, shootingx 2s ease-in-out infinite;
    opacity: 0;
  }
  // animation: tail 2s ease-in-out infinite, shootingy 2s ease-in-out infinite;
  .shooting-star1 {
    top: 6.5%;
    right: 40%;
    width: 1.53rem;
    height: 1.5rem;
    background-image: url("../view/images/B_meteor1.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 1s;
  }
  .shooting-star2 {
    top: 32%;
    right: 25%;
    width: 1.12rem;
    height: 0.95rem;
    background-image: url("../view/images/B_meteor2.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 2s;
  }
  .shooting-star3 {
    top: 28%;
    right: 5%;
    width: 1.44rem;
    height: 1.43rem;
    background-image: url("../view/images/B_meteor3.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 3s;
  }
  .shooting-star4 {
    top: 55%;
    right: 70%;
    width: 1.03rem;
    height: 0.95rem;
    background-image: url("../view/images/B_meteor4.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 5s;
  }

  @keyframes tail {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes shootingx {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100px, 100px);
    }
  }
}
</style>
